<template>
	<view>
		<NavBar text='住院服务' />
		<view style="width: 100%; height: 165rpx;"></view>
		<view style="width: 90%; margin:0 auto;">
			<view class="flx">
				<view class="flx1">
					<view class="flxAlign">
						<view class="styleImage">
							<image src="/static/hospital/header.png"></image>
						</view>
					</view>
					<view style="margin-left: 20rpx;">
						<view class="flx">
							<view class="nametext">{{userfw.name}}</view>
							<view class="sexname">{{userfw.sex}}</view>
							<view class="sexname">{{userfw.age}}岁</view>
							<view class="pthz">{{userfw.patient}}</view>
						</view>
						<view class="flx" style="margin-top:20rpx;">
							<view class="numbertext">{{userfw.number}}</view>
							<view class="kstext">{{userfw.bq}}</view>
							<view class="badtext">{{userfw.bad}}号病床</view>
						</view>
					</view>
				</view>
				<view class="rightImage">
					<image src="/static/hospital/right.png"></image>
				</view>
			</view>
			<view style="width: 100%; height: 40rpx;"></view>
		</view>

		<view
			style="width: 100%; background-color:#f7f7f7; height: 25rpx; border:#cecece solid 1rpx; border-left: none; border-right: none;">
		</view>
		<view class="style_menu">
			<view style="width: 100%; height: 20rpx;"></view>
			<view class="style_menu_c flx">
				<view class="style_menu_c_" @click="jnyj(1)">
					<view class="style_menu_c_border flx2 flxAlign">
						<view class="style_image">
							<image src="/static/hospital/yajin.png"></image>
						</view>
					</view>
					<view class="style_text">缴纳押金</view>
				</view>
				<view class="style_menu_c_" @click="jnyj(2)">
					<view class="style_menu_c_border flx2 flxAlign">
						<view class="style_image">
							<image src="/static/hospital/zxqd.png"></image>
						</view>
					</view>
					<view class="style_text">住院清单</view>
				</view>
				<view class="style_menu_c_" @click="jnyj(3)">
					<view class="style_menu_c_border flx2 flxAlign">
						<view class="style_image">
							<image src="/static/hospital/ckbg.png"></image>
						</view>
					</view>
					<view class="style_text">查看报告</view>
				</view>
			</view>
			<view style="width: 100%; height: 50rpx;"></view>
		</view>
		<view
			style="width: 100%; background-color:#f7f7f7; height: 25rpx; border:#cecece solid 1rpx; border-left: none; border-right: none;">
		</view>
		<view class="zy">
			<view style="width: 90%; margin:0 auto;">
				<view class="zy_header">
					住院信息
				</view>
				<view class="flx rr_style">
					<view class="zy_header_left">入院日期：</view>
					<view style="font-size: 32rpx; font-weight: 600; color: #333; line-height: 30rpx;">{{zyinfo.date}}
					</view>
				</view>
				<view class="flx rr_style">
					<view class="zy_header_left">余额：</view>
					<view style="font-size: 32rpx; font-weight: 600; color: #333; line-height: 30rpx;">￥<span
							style="color:#66cc00;">{{zyinfo.money}}</span>元</view>
				</view>
				<view class="flx rr_style">
					<view class="zy_header_left">状态：</view>
					<view style="font-size: 25rpx; color: #0066ff; line-height: 30rpx;">{{zyinfo.status}}</view>
				</view>
				<view class="flx rr_style">
					<view class="zy_header_left">已花费：</view>
					<view style="font-size: 25rpx; line-height: 30rpx;">￥{{zyinfo.hufei}}元</view>
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 40rpx;"></view>
		<view
			style="width: 100%; background-color:#f7f7f7; height: 25rpx; border:#cecece solid 1rpx; border-left: none; border-right: none;">
		</view>
		<view class="fylist">
			<view style="border-bottom:1rpx solid #f5f5f5;">
				<view style="width: 90%; margin:0 auto; font-size: 30rpx; line-height: 80rpx;">每日费用列表</view>
			</view>
			<view>
				<view>
					<view class="liststyle" v-for="(item,index) in list" :key="index" style="margin-top: 25rpx;">
						<view style="width: 90%; margin:0 auto;" class="flx">
							<view class="flx1">
								<view class="flxAlign">
									<view class="imagetext">
										<image src="/static/hospital/rilli.png"></image>
									</view>
								</view>
								<view style="margin-left:30rpx;">
									<view class="flx1 margintext">
										<view class="margintext_">日期:</view>
										<view class="margintext_t">{{item.date}}</view>
									</view>
									<view class="flx1 margintext" style="margin-top: 10rpx;">
										<view class="margintext_">费用:</view>
										<view  class="margintext_t">{{item.money}} 元</view>
									</view>
								</view>
							</view>
							<view class="flxAlign">
								<u-icon name="arrow-right" color="#cecece" size="30rpx"></u-icon>
							</view>
						</view>
						<view style="width: 100%; height: 20rpx;"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				userfw: {
					name: '张三三',
					sex: '女',
					age: '23',
					patient: '普通患者',
					number: '12323',
					bq: '骨科一病区',
					bad: '23'
				},
				zyinfo: {
					date: '2023-02-02 13:22',
					money: '1023.22',
					status: '正常',
					hufei: '2321.23'
				},
				list: [{
					date: '2019-03-12',
					money:'991.67'
				},
				{
					date: '2019-03-12',
					money:'1456.13'
				},
				{
					date: '2019-03-12',
					money:'1012.67'
				},
				{
					date: '2019-03-12',
					money:'1318.67'
				},
				{
					date: '2019-03-12',
					money:'2023.67'
				},
				{
					date: '2019-03-13',
					money:'2046.67'
				},
				{
					date: '2019-03-14',
					money:'2070.67'
				}
				]
			}
		},
		methods:{
			jnyj(number){
				if(number == 1){
					uni.navigateTo({
						url:'/pages/HospitalizationServices/PayDeposit'
					})
				}else if(number == 2){
					uni.navigateTo({
						url:'/pages/HospitalizationServices/HospitalizationChecklist'
					})
				}else{
					uni.navigateTo({
						url:'/pages/ReportPrescription/index'
					})
					
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.styleImage {
		width: 100rpx;
		height: 100rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.nametext {
		font-size: 32rpx;
		font-size: 600;
		color: #333;
		line-height: 40rpx;
	}

	.sexname {
		font-size: 25rpx;
		color: #c0c0c0c0;
		line-height: 40rpx;
	}

	.pthz {
		font-size: 25rpx;
		background-color: #169bd5;
		color: #fff;
		border-radius: 8rpx;
		padding: 0 10rpx 0 10rpx;
		line-height: 40rpx;
	}

	.numbertext {
		font-size: 28rpx;
		color: #333;
	}

	.kstext {
		background-color: #ffcc33;
		color: #fff;
		font-size: 25rpx;
		line-height: 40rpx;
		padding: 0 10rpx 0 10rpx;
		border-radius: 10rpx;
		margin-left: 20rpx;
	}

	.badtext {
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.rightImage {
		width: 35rpx;
		height: 90rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.style_menu {
		width: 100%;

		.style_menu_c {
			width: 90%;
			margin: 0 auto;

			.style_menu_c_border {
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
				border: #333 solid 1rpx;

				.style_image {
					width: 80rpx;
					height: 80rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.style_text {
				text-align: center;
				margin-top: 20rpx;
				font-size: 28rpx;
			}
		}
	}

	.zy {

		.zy_header {
			line-height: 80rpx;
			border-bottom: solid 1rpx #c0c0c0c0;
			font-size: 28rpx;
		}

		.rr_style {
			margin-top: 42rpx;

			.zy_header_left {
				width: 20%;
				font-size: 28rpx;
				text-align: end;
				line-height: 30rpx;
			}
		}
	}
	.liststyle{
		border-bottom: 1rpx solid #f5f5f5;
		.imagetext{
			width: 30rpx;
			height: 38rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.margintext{
			.margintext_{
				font-size: 32rpx;
				font-weight: 600;
			}
			.margintext_t{
				font-size: 32rpx;
				margin-left: 20rpx;
				font-weight: 600;
				color: #529d97;
			}
		}
	}
</style>